import React,{useEffect, useState} from 'react'
import { NavBar,CalendarPicker, List, Input } from 'antd-mobile'
import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react'
import { useNavigate } from 'react-router-dom'
export default function Erb() {
    
      const [visible1, setVisible1] = useState(false)
      const [visible2, setVisible2] = useState(false)
      const [visible3, setVisible3] = useState(false)
    //   const [val, setVal] = useState(() => [
    //     dayjs().subtract(2, 'day').toDate(),
    //     dayjs().add(2, 'day').toDate(),
    //   ])
      const singleDate = new Date('2023-06-03')
      useEffect(()=>{
        
      })
      const Navigete=useNavigate()
  return (
    <div>
         <NavBar
        back={
          < >
          
          </>
        
        }
        right={
          <span className="flex-center" onClick={(e) => Toast.show('icon')}>
            <div onClick={()=>{
                Navigete("/app/home")
            }}  
            style={{width:'40px',marginLeft:'40px',height:'10px',lineHeight:'10px',borderRadius:'20px',color:'white',padding:'10px',textAlign:'center',backgroundColor:'rgb(32,200,116)'}}
            >发布</div>
          </span>
        }
      onBack={() => {
        Navigete(-1)
      }}
      >
    
      </NavBar>
        <div style={{width:'80%',marginLeft:'16px',marginTop:'20px'}}>
            <img src='https://cdn7.axureshop.com/demo2024/2268035/images/%E4%B8%80%E8%B5%B7%E8%B7%91/u604-0.svg'></img>
            <p style={{paddingTop:'4px',fontSize:'17px',marginLeft:'7px'}}>3月27日晚上8点，相约江城工程学院东篮球场一起夜跑，2人即可成队</p>

        
        </div>
        <div style={{width:'80%',marginLeft:'20px',marginTop:'50px'}}>
            <p>
            <span style={{fontSize:'18px',display:'inline-block'}}>约定时间</span>
            <span style={{display:'inline-block',marginLeft:'20px'}}> 
                
                <List.Item
        onClick={() => {
          setVisible1(true)
        }}
      >

        <CalendarPicker
     
          visible={visible1}
          selectionMode='single'
          defaultValue={singleDate}
          onClose={() => setVisible1(false)}
          onMaskClick={() => setVisible1(false)}
        />
      </List.Item></span>
            </p>
        <p style={{marginTop:'15px'}}>
            <span style={{display:'inline-block',fontSize:'18px',}}>招募人数</span>
            <span style={{display:'inline-block',marginLeft:'20px'}}>
                <Input style={{border:'1px solid rgb(247,247,247)',width:'150px'}}></Input>
            </span>
            <span style={{display:'inline-block',fontSize:'18px'}}>人起</span>
        </p>
        <p style={{marginTop:'15px'}}>
            <span style={{display:'inline-block',fontSize:'18px',}}>约定学校</span>
            <span style={{display:'inline-block',marginLeft:'20px'}}>
                <Input style={{border:'1px solid rgb(247,247,247)',width:'150px'}}></Input>
            </span>

        </p>
        <p style={{marginTop:'15px'}}>
            <span style={{display:'inline-block',fontSize:'18px',}}>详细地点</span>
            <span style={{display:'inline-block',marginLeft:'20px'}}>
                <Input style={{border:'1px solid rgb(247,247,247)',width:'150px'}}></Input>
            </span>
            
        </p>
        <p style={{marginTop:'15px'}}>
            <span style={{fontSize:'18px',display:'inline-block'}}>报名截止时间</span>
            <span style={{display:'inline-block',marginLeft:'20px'}}> 
                
                <List.Item
        onClick={() => {
          setVisible1(true)
        }}
      >
        
        <CalendarPicker
     
          visible={visible1}
          selectionMode='single'
          defaultValue={singleDate}
          onClose={() => setVisible1(false)}
          onMaskClick={() => setVisible1(false)}
        />
      </List.Item></span>
            </p>
        </div>



    </div>
  )
}
